<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文混排</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
</head>
<style>
    /*https://fkwylsj09.jz.fkw.com/?previewDemo=true  服务范围  第二个模块*/
    .imgText_mix_title {
        text-align: center;
    }

    .imgText_mix_title h2 {
        color: var(--c_theme);
        font-size: var(--f_title);
        line-height: var(--l_title);
    }

    .imgText_mix_title p {
        margin: 22px 0 0 0;
        color: var(--c_text);
        font-size: var(--f_text);
        line-height: var(--l_text);
    }

    .imgText_mix_list {
        margin: 60px auto 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .imgText_mix_list_left {
        width: 50%;
    }

    .imgText_mix_list_left_text {
        margin: 40px 0;
        color: var(--c_text);
        font-size: var(--f_describe);
        line-height: var(--l_describe);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .imgText_mix_list_left_img {
        width: 100%;
        height: 410px;
    }

    .imgText_mix_list_left img {
        width: 100%;
        height: 100%;
    }

    .imgText_mix_list_right {
        width: 50%;
    }

    .imgText_mix_list_right ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .imgText_mix_list_right ul li {
        padding-left: 40px;
        width: 50%;
    }

    .imgText_mix_list_right ul li img {
        width: 100%;
        height: 450px;
    }

    .imgText_mix_list_right_text {
        margin: 40px 0 0 0;
        color: var(--c_text);
        font-size: var(--f_describe);
        line-height: var(--l_describe);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    @media(max-width:1000px) {
        .imgText_mix_title p {
            margin: 10px 0 0 0;
        }

        .imgText_mix_list {
            margin: 30px auto 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .imgText_mix_list_left {
            width: 100%;
        }

        .imgText_mix_list_left_text {
            margin: 20px 0;
        }

        .imgText_mix_list_left_img {
            width: 100%;
            height: 410px;
        }

        .imgText_mix_list_right {
            width: 100%;
        }

        .imgText_mix_list_right ul li {
            padding-left: 0;
            margin-top: 20px;
            width: 50%;
        }
        .imgText_mix_list_right ul li:nth-child(2) {
            padding-left: 20px;
        }
        .imgText_mix_list_right_text {
            margin: 20px 0 0 0;
        }
    }

    @media(max-width:768px){
        .imgText_mix_list_left_img {
            height: 200px;
        }
        .imgText_mix_list_right ul li img {
        height: 250px;
    }
    }
</style>

<body>
    <div class="imgText_mix modular">
        <div class="imgText_mix_title public_width">
            <h2>行之有效的管理方式</h2>
            <p>EFFECTIVE MANAGEMENT</p>
        </div>
        <div class="imgText_mix_list public_width">
            <div class="imgText_mix_list_left">
                <div class="imgText_mix_list_left_text">
                    <p>我公司坚持“高效、团结、创新”的方针，坚持 创新发展、竭诚为社会服务，愿与各界同仁携手 共进、创造美好和谐的共赢美景多年来执行全面质量管理，在质量保证体系方面有整套行之有效的管理方式</p>
                </div>
                <div class="imgText_mix_list_left_img">
                    <img src="../images/case_list_2_1.jpg" alt="">
                </div>
            </div>
            <div class="imgText_mix_list_right">
                <ul>
                    <li>
                        <div class="imgText_mix_list_right_img">
                            <img src="../images/case_lists_four.webp" alt="">
                        </div>
                        <div class="imgText_mix_list_right_text">
                            <p>我公司坚持“高效、团结、创新”的方针，坚持 创新发展、
                                竭诚为社会服务，愿与各界同仁携手</p>
                        </div>
                    </li>
                    <li>
                        <div class="imgText_mix_list_right_img">
                            <img src="../images/case_lists_four.webp" alt="">
                        </div>
                        <div class="imgText_mix_list_right_text">
                            <p>我公司坚持“高效、团结、创新”的方针，坚持 创新发展、
                                竭诚为社会服务，愿与各界同仁携手</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>